import styled from 'styled-components';
import ColorUtil from '@/utils/color.js';
import { memo } from 'react';

const FileSvgView = styled.div`
  width: ${(props) => props?.ratio * 100}px; /* 宽度 */
  height: ${(props) => props?.ratio * 120}px; /* 宽高比例 5:6 */
  background: linear-gradient(
    135deg,
    ${(props) => props?.color},
    ${(props) => ColorUtil.lightenColor(props?.color, 75)}
  ); /* 渐变背景色 */
  border-radius: 6px; /* 圆角 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  //box-shadow:
  //  -4px 5px 8px rgba(0, 0, 0, 0.2),
  //  0 0 0 rgba(0, 0, 0, 0);

  .cut-out {
    position: absolute;
    top: -5px;
    right: -5px;
    width: ${(props) => props?.ratio * 45}px; /* 切角的宽度 */
    height: ${(props) => props?.ratio * 45}px; /* 切角的高度 */
    background: white; /* 切角的颜色 */
    transform: rotate(90deg); /* 旋转 180 度 */
    clip-path: polygon(0 0, 100% 0, 0 100%); /* 裁剪为三角形 */
    z-index: 2;
  }

  .file-text {
    font-size: ${(props) => props?.ratio * 30}px; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    color: white; /* 字体颜色 */
    font-family: 'Arial', sans-serif; /* 字体样式 */
  }
`;

/**
 * 文件图标
 *
 * @param {object} props
 * @param {string} props.text 文本
 * @param {number} props.height 高度
 * @param {string} props.color 颜色
 */
function FileSvg(props) {
  // 默认颜色
  const defaultColor = ColorUtil.isValidHexColor(props?.color) ? props?.color : '#1677ff';

  // 获取宽度倍率
  function getRatio() {
    if (!props.height) {
      return 1;
    }
    const height = 120; // 默认100px
    return props.height / height;
  }

  return (
    <FileSvgView ratio={getRatio()} color={defaultColor}>
      <div className="cut-out"></div>
      <span className="file-text">{props.text}</span>
    </FileSvgView>
  );
}

export default memo(FileSvg);
